<template>
    <div class="box">
      <div id="container" style="width:100%; height:100%"></div>
    </div>
  </template>
  
<script>
  import AMap from 'AMap' // 引入高德地图
  export default {
    props: ["clientId"],
    data: function () {
      return {
        map: '',
        marker: '',
       
      }
    },
    mounted() {
      this.init(this.lng, this.lat)
    },
    methods: {
  
      init(lng, lat) {
        this.map = new AMap.Map('container', {
          animateEnable:true,
          resizeEnable: true,
          mapStyle: "amap://styles/dark", // 设置颜色底层
          //center: [lng, lat],
          expandZoomRange: true,
          buildingAnimation: true,
          zoom: 1,
  
          
          zooms: [3, 20],
          enableHighAccuracy: true,
          viewMode: '3D'//使用3D视图
  
        });
      },
      initmarker(lng, lat) {
        var icon = new AMap.Icon({
          size: new AMap.Size(52, 26), // 图标尺寸
          image: "https://webapi.amap.com/images/car.png",
        
         // imageSize: new AMap.Size(52, 26) // 根据所设置的大小拉伸或压缩图片
        });
        this.marker = new AMap.Marker({
          zoom: 17,
          icon: icon,
          position: [lng, lat],//位置
        
        })
        this.map.setCenter([lng,lat]);
        this.map.add(this.marker);//添加到地图
      }
  
    }
  }
  
  </script>
  <style scoped>
  
  :deep(.amap-logo ){
    z-index:-1;
  }
  
  </style>
  